<template>
<div id="AllData">
  <van-search v-model="searchValue" :placeholder="`请输入${ active ==2 ? '代理' : '门店' }名称`" show-action shape="round">   
    <div slot="action" @click="search" class="ft-blue">搜索</div>
	</van-search>  
  <van-tabs v-model="active" @change="searchValue = ''" style="flex-shrink: 0; padding-bottom: 10px;" inverse 
    indicator-color="#18a3dc" color="#18a3dc" text-color="rgba(0, 0, 0, 0.54)" center type="card">
    <van-tab title="门店统计"></van-tab>
    <van-tab title="设备统计"></van-tab>
    <!-- <van-tab title="代理统计"></van-tab> -->
  </van-tabs>   
  <div class="flex-body">
    <component :is="activeArr[ active ]" ref="com"></component>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

import MenDian from './MenDian.vue';
import SheBei from './SheBei.vue';
import DaiLi from './DaiLi.vue';

@Component({ components: { MenDian, SheBei, DaiLi } })
export default class AllData extends Vue {

  active: any = 0
  searchValue: any = ''

  activeArr: any = [ 'MenDian', 'SheBei', 'DaiLi' ]

  search() {
    let com: any = this.$refs.com;
    com.search(this.searchValue);
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#AllData {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

